<template>
  <div class="unused-wrapper">
    <head-top head-title='附近的闲置' go-back="true" unused-publish="发布"></head-top>
    <section class="content">
      <div class="goods-list">
         <ul>
           <li v-for="(list,index) in detail" :key="index">
             <div @click="$router.push('/home/UnusedDetail/'+list.id)">
               <div class="li_div">
                 <div class="li_div_left">
                   <div class="div_img" v-show="list.img[0]" v-lazy:background-image="`${list.img[0]}`"></div>
                   <img v-show="!list.img[0]" src="../../assets/imgDefault.png" alt="">
                 </div>
                 <div class="li_div_right">
                   <h1>{{list.title}}</h1>
                   <h2>{{list.content}}</h2>
                   <p>￥{{list.money}}</p>
                 </div>
               </div>
             </div>
           </li>
         </ul>
      </div>
    </section>
    <div class="default" v-show="!detail.length && !noResult">
      <p>数据加载中</p>
    </div>
    <div class="default1" v-show="noResult">
      <p>抱歉！暂无数据</p>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import { Toast } from 'mint-ui'
  import { getGoodsDetail } from '../../api/publishList.js'

  export default {
    name: 'Unused',
    data () {
      return {
        lists: [],
        noResult: false,
        isFirstEnter: false
      }
    },
    created () {
      this.isFirstEnter = true
      this._getGoodsDetail()
    },
    // 设置缓存从哪个页面返回
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'UnusedDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack || this.isFirstEnter) {
        this._getGoodsDetail()
      }
      this.$route.meta.isBack = false
      this.isFirstEnter = false
    },
    methods: {
      _getGoodsDetail () {
        this.noResult = false
        getGoodsDetail().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.lists = res.data
          }
          if (this.lists.length === 0) {
            this.noResult = true
          } else {
            this.noResult = false
          }
        })
      }
    },
    computed: {
//    使最新发布的数据排在最前面
      detail () {
        if (this.lists.length < 0) {
          Toast({
            message: '暂无数据',
            position: 'middle',
            duration: 2500
          })
        } else {
          return this.lists.reverse()
        }
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .unused-wrapper {
    .content {
      padding-top: 50px;
      .goods-list {
        background-color: #fff;
        ul {
          li {
            padding: 5px 10px;
            .li_div {
              border-bottom: 1px solid #d9d9d9;
              width: 100%;
              padding-bottom: 10px;
              height: 70px;
              .li_div_left {
                float: left;
                display: flex;
                width: 70px;
                height: 70px;
                .div_img {
                  width: 100%;
                  height: 100%;
                  background-position: center;
                  background-size: cover;
                }
                img {
                  width: 100%;
                }
              }
              .li_div_right {
                padding-left: 10px;
                float: left;
                h1 {
                  font-size: 15px;
                  color: #292929;
                  font-weight: normal;
                  margin-top: 5px
                }
                h2 {
                  font-size: 12px;
                  font-weight: normal;
                  line-height: 36px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  color: #393939;
                  width: 220px;
                }
                p {
                  font-size: 12px;
                  font-weight: normal;
                  color: #ff4444;
                }
              }
            }
          }
        }
      }
    }
    .default {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 100px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/loading.gif") no-repeat;
      background-size: 40px 40px;
      background-position: center;
      padding-bottom: 100px;
      p {
        font-size: 15px;
        color: #666;
        margin-top: 100px;
      }
    }
    .default1 {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 0;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 20px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 190px;
      }
    }
  }
</style>
